<template>
	<view>
		<view class="comment">
			<view class="comment_item" >
				<view class="head">
					<view class="head_content">
						<u-avatar :src="data.memberIcon" size="mini"></u-avatar>
						<text class="head_content_text">{{data.memberNickName}}</text>
						<u-rate :count="5" v-model="data.star" :gutter="5" disabled></u-rate>
					</view>
					<view class="head_date">{{data.createTime}}</view>
				</view>
				<view class="nav">
					<view class="nav_title"> {{data.content}}</view>
					<view class="nav_img" v-if="item.picsArr.length!=0" >
						<image class="nav_img_image" v-for="(pic,i) in data.picsArr" :key="i" :src="pic" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="reply comment">
			<input class="reply_input" v-model="inputValue" placeholder="请输入留言" type="text" />
			<u-button  @click="reply()">回复</u-button>
		</view>
		<view class="comment" v-for="item in data.commentReplays" :key="item.id">
			<view class="comment_item" >
				<view class="head">
					<view class="head_content">
						<u-avatar :src="item.memberIcon" size="mini"></u-avatar>
						<text class="head_content_text">{{item.memberNickName}}</text>
					</view>
					<view class="head_date">{{item.createTime}}</view>
				</view>
				<text>{{item.content}}</text>
			</view>
		</view>
		<u-no-network tips="哎呀，网络信号丢失"></u-no-network>
		<failTimeout v-show="failTimeout"></failTimeout>
	</view>
</template>

<script>
	import PmsPortalCommentController from '../../api/PmsPortalCommentController.js'
	import {formatDate} from '../../utils/date.js'
	import Cookies from "../../utils/Cookies.js"
	export default {
		data() {
			return {
				failTimeout:false,
				data:{},
				inputValue:'',
				commentId:0,
			}
		},
		async onLoad(option) {
			this.commentId=option.commentId;
			await PmsPortalCommentController.getById(this.commentId).then(res=>{
				if(res.data.code==200){
					res.data.data.createTime = formatDate(new Date(res.data.data.createTime), 'yyyy-MM-dd')
					console.log(res.data.data.pics)
					res.data.data.picsArr=res.data.data.pics!=''&&res.data.data.pics!=null?res.data.data.pics.split(','):null
					res.data.data.commentReplays.forEach(e=>{
						e.createTime=formatDate(new Date(e.createTime), 'yyyy-MM-dd')	
					})
					this.data=res.data.data
					this.inputValue=''
				}
			}).catch(err=>{
				if(err.errMsg=='request:fail timeout'){
					this.failTimeout=true
				}
			})
		},
		methods: {
			async rendering(){
				await PmsPortalCommentController.getById(this.commentId).then(res=>{
					if(res.data.code==200){
						res.data.data.createTime = formatDate(new Date(res.data.data.createTime), 'yyyy-MM-dd')
						console.log(res.data.data.pics)
						res.data.data.picsArr=res.data.data.pics!=''&&res.data.data.pics!=null?res.data.data.pics.split(','):null
						res.data.data.commentReplays.forEach(e=>{
							e.createTime=formatDate(new Date(e.createTime), 'yyyy-MM-dd')	
						})
						this.data=res.data.data
						this.inputValue=''
					}
				}).catch(err=>{
					if(err.errMsg=='request:fail timeout'){
						this.failTimeout=true
					}
				})
			},
			reply(){
				if(this.inputValue!=null&&this.inputValue!=''&&this.inputValue!='undefined'){
					PmsPortalCommentController.addReplay(this.data.id,this.inputValue).then(res=>{
						if(res.data.code==200){
							this.rendering()
						}else if(res.data.code==401){
							Cookies.login()
						}
						
					}).catch(err=>{
						console.log(err)
					})
				}
			}
		}
	}
</script>
<style>
	page {
		background-color: rgb(240, 240, 240);
	}
</style>
<style scoped>
.comment {
		background: white;
		padding: 22rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
	}

	.comment .head {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.comment .head .head_content {
		display: flex;
		align-items: center;
	}

	.head_content_text {
		max-width: 310rpx;
		margin: 0 10rpx;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/

	}

	.nav {}

	.nav .nav_img {
		display: flex;
		flex-wrap: wrap;
	}

	.nav .nav_title {
		margin: 10rpx 0;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 3;
		/** 显示的行数 **/
	}

	.nav .nav_img .nav_img_image {
		width: 100%;
		margin: 10rpx 20rpx 0 0;
	}
	.reply{
		padding: 20rpx;
	}
	.reply_input{
		margin-bottom: 20rpx;
		border: 1px solid #dcdcdc;
	}
</style>
